import React, { Component } from "react";
import "./Website.css";
import axios from '../../utils/http';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

export default class Website extends Component {
    //受控组件
    state = {
        name: '',  
        url: '',
        keywords: '',
        websites: []
    }

    render() {
        //获取状态数据
        let {name, url, keywords} = this.state;
        return (
            <div className="website-container">
                <ToastContainer />
                <h2>网址管理</h2>
                <hr />
                <div className="form">
                    标题: <input type="text" value={name}    onChange={this.saveData('name')}  />&nbsp;
                    网址: <input type="text" value={url}     onChange={this.saveData('url')}  />&nbsp;
                    关键字: <input type="text" value={keywords} onChange={this.saveData('keywords')}  /> &nbsp;
                    <button onClick={this.add} >新增</button>
                </div>
                <hr />
                <table border="1" width="100%">
                    <thead>
                        <tr><td>ID</td><td>标题</td><td>URL</td><td>关键字</td><td>操作</td></tr>
                    </thead>
                    <tbody>
                        {
                            this.state.websites.map(item => {
                                return <tr key={item.id}>
                                            <td>{item.id}</td>
                                            <td>{item.name}</td>
                                            <td>{item.url}</td>
                                            <td>{item.keywords}</td>
                                            <td><button onClick={this.remove(item.id)}>删除</button></td></tr>
                            })
                        }
                    </tbody>
                </table>
            </div>
        );
    }

    //删除网址
    remove =  (id) => {
        return async () => {
            //确认
            if(!window.confirm('您确定要删除当前内容么???')) return;
            //1. 发送 AJAX
            await axios.delete('/website/' + id);
            //2. 提醒
            toast.success('删除成功');
            //3. 更新显示列表      
            this.setState({
                websites: this.state.websites.filter(item => item.id !== id)
            })
        }
    }

    //新增网址的事件回调
    add = async () => {
        //获取状态
        let {name, url, keywords, websites} = this.state;
        //发送请求
        let result = await axios.post('/website', {name, url, keywords});
        //表明成功
        toast.success('恭喜恭喜, 新增成功!!');
        //清空表单框中的值
        this.setState({
            //清空表单框中的值
            name: '',
            url: '',
            keywords: '',
            //更新列表
            websites: [...websites, result]
        });
        
    }

    //onChange 回调
    saveData = (type) => {
        return (e) => {
            this.setState({
                [type]: e.target.value
            })
        }
    }

    componentDidMount(){
        // console.log('挂载')
        //测试 NProgress
        // NProgress.start();

        // setTimeout(() => {
        //     NProgress.done();
        // }, 2000)
        //获取所有的网址信息
        this.getAllWebsite();
        //轮询    
        this.timer = setInterval(this.getAllWebsite, 3000);
    }

    getAllWebsite = async() => {
        //发送 AJAX 请求获取所有的网址
        let result = await axios.get('/website');
        //成功  设置状态
        this.setState({
            websites: result
        })
        
    }

    //组件将要卸载生命周期回调
    componentWillUnmount(){
        console.log('卸载')
        clearInterval(this.timer);
    }
}
